import React, { Component, Fragment } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { connect } from 'dva'
import {
  Card,
  Button,
  Form,
  Input,
  Modal,
  Descriptions,
  Steps,
  Divider,
  Drawer,
  Timeline,
  Spin,
  Cascader,
  message,
  Tabs,
  Select,
  Radio,
  InputNumber,
  Popconfirm,
  Table,
  Icon
} from 'antd'
import MyPageTable from '@/components/MyPageTable'
import AntTable from '@/components/AntTable'
import { onTableData, getParam } from '@/utils/utils.js'
import OrderService from '@/services/order'
import CustomCard from '@/components/CustomCard'
import {
  AuditReason,
  AuditStatus,
  confirmSettlementStatus,
  confirmSettlementType,
  orderStatusMap,
  contractStatus,
  locationErrorType
} from '@/utils/enum'
import { router } from 'umi'
import CreditDetail from './creditDetail'
import CreditDetailOld from './creditDetailOld'
import CreditDetailThree from './creditDetailThree'
// 风控报告
// import XinyanReport from './Report/XinyanReport';
import BairongReport from './Report/BairongReport'

import { apply, optionsdata } from './data'
// import { getParam } from '@/utils/utils';
import styles from './index.less'

const { TextArea } = Input
const FormItem = Form.Item
const { Option } = Select
const { Step } = Steps
const { TabPane } = Tabs

const StepsData = {
  '01': 0,
  '02': 0,
  '03': 1,
  '04': 1,
  '05': 2,
  '06': 3,
  '07': 4,
  '08': 4,
  '09': 5,
  '10': 5
}
const columnsByStagesStute = {
  '1': '待支付',
  '2': '已支付',
  '3': '逾期已支付',
  '4': '逾期待支付',
  '5': '已取消',
  '6': '已结算',
  '7': '已退款,可用',
  '8': '线下履约'
}
const signStatus = {
  CREATE: '合同已创建',
  UN_SIGN: '待用户签署',
  SiGNED: '用户已签署',
  SIGNED: '用户已签署',
  SUBMIT: '合同已提交',
  ACCEPT: '公证处已受理',
  PASSED: '公证书已下达'
}
const collstus = {
  '01': '承诺还款',
  '02': '申请延期还款',
  '03': '拒绝还款',
  '04': '电话无人接听',
  '05': '电话拒接',
  '06': '电话关机',
  '07': '电话停机',
  '08': '客户失联'
}
const BusinessCollection = [
  {
    title: '记录人',
    dataIndex: 'userName'
  },
  {
    title: '记录时间',
    dataIndex: 'createTime'
  },
  {
    title: '结果',
    dataIndex: 'result',
    render: result => collstus[result]
  },
  {
    title: '小记',
    dataIndex: 'notes'
  }
]
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 }
  }
}
// 平台备注
const columns = [
  {
    title: '备注人姓名',
    dataIndex: 'userName'
  },
  {
    title: '备注时间',
    dataIndex: 'createTime'
  },
  {
    title: '备注内容',
    dataIndex: 'remark'
  }
]
// 商家备注
const columnsBusiness = [
  {
    title: '备注人姓名',
    dataIndex: 'userName'
  },
  {
    title: '备注时间',
    dataIndex: 'createTime'
  },
  {
    title: '备注内容',
    dataIndex: 'remark'
  }
]
// 增值服务
const columnsAddService = [
  {
    title: '增值服务ID',
    dataIndex: 'shopAdditionalServicesId'
  },
  {
    title: '增值服务名称',
    dataIndex: 'shopAdditionalServicesName'
  },
  {
    title: '增值服务价格',
    dataIndex: 'price'
  }
]
// 商品信息
const columnsInformation = [
  {
    title: '商品图片',
    dataIndex: 'imageUrl',
    render: imageUrl => {
      return (
        <img
          src={imageUrl}
          style={{
            // width: 116,
            height: 62
          }}
        />
      )
    }
  },
  {
    title: '商品名称',
    dataIndex: 'productName'
  },
  {
    title: '商品编号',
    dataIndex: 'productId',
    render: (text, record) => {
      return (
        <a
          className="primary-color"
          onClick={() => router.push(`/goods/list/detail/${record.id}`)}
        >
          {text}
        </a>
      )
    }
  },
  {
    title: '规格颜色',
    dataIndex: 'spec'
  },
  {
    title: '数量',
    dataIndex: 'num'
  },
  {
    title: '是否可买断',
    dataIndex: 'buyOutSupport',
    render: buyOutSupport => {
      return <span>{buyOutSupport ? '可买断' : '不可买断'}</span>
    }
  },
  {
    title: '买断价',
    dataIndex: 'salePrice'
  }
]

// 在途订单表格
const payedOrderColumnsInformation = [
  {
    title: '商品名称',
    dataIndex: 'productName'
  },
  {
    title: '下单时间',
    dataIndex: 'orderTime'
  },
  {
    title: '订单状态',
    dataIndex: 'status',
    render: status => {
      return <span>{orderStatusMap[status]}</span>
    }
  },
  {
    title: '还款状态',
    dataIndex: 'isViolation',
    render: isViolation => {
      return (
        <span>
          {isViolation === '01' || isViolation === '03' ? '正常' : '逾期'}
        </span>
      )
    }
  }
]

// 账单信息
const columnsBill = [
  // {
  //   title: '总押金',
  //   dataIndex: 'totalDeposit',
  // },
  // {
  //   title: '押金减免',
  //   dataIndex: 'depositReductions',
  // },
  // {
  //   title: '冻结额度',
  //   dataIndex: 'freezePrice',
  // },
  // {
  //   title: '信用减免',
  //   dataIndex: 'creditDeposit',
  // },
  // {
  //   title: '实际冻结',
  //   dataIndex: '', // todo
  //   render: (text, record) => {
  //     return (record.freezePrice - record.creditDeposit).toFixed(2);
  //   },
  // },
  // {
  //   title: '买断价',
  //   dataIndex: 'salePrice',
  // },
  {
    title: '总租金',
    dataIndex: 'totalRent'
  },
  {
    title: '运费',
    dataIndex: 'freightPrice'
  },
  {
    title: '平台优惠',
    dataIndex: 'platformCouponReduction'
  },
  {
    title: '店铺优惠',
    dataIndex: 'couponReduction'
  }
]

// 分期
const columnsByStages = [
  {
    title: '总期数',
    dataIndex: 'totalPeriods'
  },
  {
    title: '当前期数',
    dataIndex: 'currentPeriods'
  },
  {
    title: '租金',
    dataIndex: 'currentPeriodsRent'
  },
  {
    title: '状态',
    dataIndex: 'status',
    render: status => <span>{columnsByStagesStute[status]}</span>
  },
  {
    title: '支付时间',
    dataIndex: 'repaymentDate'
  },
  {
    title: '账单到期时间',
    dataIndex: 'statementDate'
  }
]
// 买断
const columnsBuyOutYes = [
  {
    title: '是否已买断',
    dataIndex: 'createTime',
    render: () => '是'
  },
  {
    title: '买断价格',
    dataIndex: 'buyOutAmount'
  }
]
const columnsBuyOutNo = [
  {
    title: '是否已买断',
    dataIndex: 'createTime',
    render: () => '否'
  },
  {
    title: '当前买断价格',
    dataIndex: 'currentBuyOutAmount'
  },
  {
    title: '到期买断价格',
    dataIndex: 'dueBuyOutAmount'
  }
]
/* const columnsBuyOut = [
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '订单编号',
    dataIndex: 'buyOutOrderId',
  },
  {
    title: '商品名称',
    dataIndex: 'productName',
  },
  {
    title: '销售价',
    dataIndex: 'realSalePrice',
  },
  {
    title: '已付租金',
    dataIndex: 'paidRent',
  },
  {
    title: '买断尾款',
    dataIndex: 'endFund',
  },
]; */
// 结算
const columnsSettlement = [
  {
    title: '宝贝状态',
    dataIndex: 'settlementType',
    render: (text, record) => {
      return confirmSettlementType[text]
    }
  },
  {
    title: '违约金',
    dataIndex: 'amount'
  },
  {
    title: '是否支付',
    dataIndex: 'settlementStatus',
    render: (text, record) => {
      return confirmSettlementStatus[text]
    }
  }
]
const paginationProps = {
  current: 1,
  pageSize: 1000,
  total: 1
}

@connect(({ order, loading, RentRenewalLoading }) => ({
  ...order,
  loading: loading.effects['order/queryOpeUserOrderDetail'],
  RentRenewalLoading: loading.effects['order/queryUserReletOrderDetail']
}))
@Form.create()
export default class Details extends Component {
  state = {
    drawerVisible: false,
    drawerData: [],
    visible: false,
    visibles: false,
    visibles2: false,
    visibles3: false,
    visiblesimg: false,
    settlement: null,
    xcurrent: 1,
    scurrent: 1,
    titles: '',
    subLists: [],
    creditInfo: {}, // 信用详情
    img: '',
    comprehensiveSuggest: '',
    deliverOptions: [],
    auditRecord: {},
    processDetail: [],

    orderVisible: '',
    orderId: '',
    radioValue: '',
    damageValue: '',

    queryOrderStagesDetail: {},

    activeTab: '1',
    creditEmpty: false,

    HastenList: [],
    HastenTotal: 1,
    HastenCurrent: 1,

    opeHastenList: [],
    opeHastenTotal: 1,
    opeHastenCurrent: 1,
    antiCheatingLevel: '',

    redata: {},
    antRiskScore: -1,
    xyData1: {},
    xyData2: {},
    brData1: {},
    brData2: {},
    brData3: {},
    brData4: {},
    brData5: {},
    brData6: {},
    queryLoading: false //查询loading
  }

  componentDidMount() {
    const { dispatch } = this.props
    const orderId = getParam('id')
    this.setState({
      orderId
    })
    this.onRentRenewalDetail()
    // this.queryPreRiskResult();
    this.queryOrderStage()
    this.onPageBusiness({ current: 1 })
    this.onPage({ current: 1 })
    if (getParam('settlement')) {
      this.onHasten(1, 3, '02')
      this.onHasten(1, 3, '01')
    }
  }

  //查询前置风控结果
  queryPreRiskResult() {
    const orderId = getParam('id')
    this.setState({
      queryLoading: true
    })
    OrderService.getPreRiskCheck({
      orderId
    })
      .then(res => {
        this.setState({
          queryLoading: false
        })
        if (res.data) {
          this.onRentRenewalDetail()
        }
      })
      .catch(err => {
        this.setState({
          queryLoading: false
        })
      })
  }

  queryOrderStage() {
    const { dispatch } = this.props

    dispatch({
      type: 'order/queryOrderStagesDetail',
      payload: {
        orderId: getParam('id')
      },
      callback: res => {
        if (res.responseType === 'SUCCESS') {
          this.setState({
            queryOrderStagesDetail: res.data
          })
        }
      }
    })
  }

  fetchProcessDetail() {
    const orderId = getParam('id')
    OrderService.queryOrderStatusTransfer({
      orderId
    }).then(res => {
      this.setState({
        processDetail: res || []
      })
    })
  }

  renderCollectionRecordModal() {
    const { orderVisible } = this.state
    const { getFieldDecorator } = this.props.form
    const orderId = getParam('id')

    const handleOk = e => {
      e.preventDefault()
      this.props.form.validateFields(['jg', 'xj'], (err, values) => {
        if (!err) {
          OrderService.orderHasten({
            orderId,
            notes: values.xj,
            result: values.jg
          }).then(res => {
            this.onHasten(1, 3, '01')
            this.handleCancel()
          })
        }
      })
    }

    return (
      <Modal
        title="记录催收"
        visible={orderVisible === 'remarks'}
        onOk={handleOk}
        onCancel={this.handleCancel}
        destroyOnClose
      >
        <Form>
          <Form.Item label="结果" {...formItemLayout}>
            {getFieldDecorator('jg', {
              rules: [{ required: true, message: '请选择结果' }]
            })(
              <Select style={{ width: '100%' }} placeholder="请选择结果">
                <Option value="01">承诺还款</Option>
                <Option value="02">申请延期还款</Option>
                <Option value="03">拒绝还款</Option>
                <Option value="04">电话无人接听</Option>
                <Option value="05">电话拒接</Option>
                <Option value="06">电话关机</Option>
                <Option value="07">电话停机</Option>
                <Option value="08">客户失联</Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item label="小记" {...formItemLayout}>
            {getFieldDecorator('xj', {
              rules: [{ required: true, message: '请输入小记' }]
            })(<TextArea placeholder="请输入" />)}
          </Form.Item>
        </Form>
      </Modal>
    )
  }

  onRentRenewalDetail = () => {
    const { dispatch } = this.props
    if (getParam('RentRenewal')) {
      dispatch({
        type: 'order/queryUserReletOrderDetail',
        payload: {
          orderId: getParam('id')
        }
      })
    } else {
      dispatch({
        type: 'order/queryOpeUserOrderDetail',
        payload: {
          orderId: getParam('id')
        },
        callback: res => {
          if (res.data.userOrderInfoDto.antRiskScore <= 0) {
            // 查询蚁盾分
            // this.onQueryYidunScore();
          } else {
            this.setState({
              antRiskScore: res.data.userOrderInfoDto.antRiskScore
            })
          }
        }
      })
    }
  }

  // 查询蚁盾分
  onQueryYidunScore = () => {
    const { dispatch } = this.props
    dispatch({
      type: 'order/getUserRisk',
      payload: {
        orderId: getParam('id')
      },
      callback: res => {
        this.setState({
          antRiskScore: parseInt(
            JSON.parse(res.data.content.replace(/[\\]/g, '')).models[0].score
          )
        })
      }
    })
  }

  onQueryOrderRemark = (pageNumber, pageSize, source) => {
    const { dispatch } = this.props
    dispatch({
      type: 'order/queryOrderRemark',
      payload: {
        orderId: getParam('id'),
        pageNumber,
        pageSize,
        source
      }
    })
  }

  // 新建备注翻页
  onPage = (e = { current: 1 }) => {
    this.setState(
      {
        xcurrent: e.current
      },
      () => {
        this.onQueryOrderRemark(e.current, 3, '01')
      }
    )
  }

  // 商机备注翻页
  onPageBusiness = (e = { current: 1 }) => {
    this.setState(
      {
        scurrent: e.current
      },
      () => {
        this.onQueryOrderRemark(e.current, 3, '02')
      }
    )
  }

  // 物流信息
  onClose = () => {
    this.setState({
      drawerVisible: false
    })
  }

  // 查看物流
  onLogistics = (e, i) => {
    this.setState(
      {
        drawerVisible: true,
        drawerTitle: e
      },
      () => {
        this.onQueryExpressInfo(i)
      }
    )
  }

  handleOk = e => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { dispatch, userOrderInfoDto } = this.props
        if (this.state.titles === '备注') {
          if (getParam('RentRenewal')) {
            dispatch({
              type: 'order/telephoneAuditOrder',
              payload: {
                orderId: getParam('id'),
                remark: values.beizhu
              },
              callback: res => {
                this.onQueryOrderRemark(1, 3, '01')
                this.onRentRenewalDetail()
                this.setState({
                  visible: false
                })
              }
            })
          } else {
            dispatch({
              type: 'order/orderRemark',
              payload: {
                orderId: getParam('id'),
                remark: values.beizhu,
                orderType: userOrderInfoDto.type
              },
              callback: res => {
                this.onQueryOrderRemark(1, 3, '01')
                this.onRentRenewalDetail()
                this.setState({
                  visible: false
                })
              }
            })
          }
        } else {
          dispatch({
            type: 'order/opeOrderAddressModify',
            payload: {
              realName: values.realName,
              street: values.street,
              telephone: values.telephone,
              province: values && values.city && values.city[0],
              city: values && values.city && values.city[1],
              area: values && values.city && values.city[2],
              orderId: getParam('id')
            },
            callback: res => {
              this.onRentRenewalDetail()
              this.setState({
                visible: false
              })
            }
          })
        }
      }
    })
  }

  onQueryExpressInfo = i => {
    const { dispatch } = this.props
    dispatch({
      type: 'order/queryExpressInfo',
      payload: {
        expressNo: i.expressNo,
        receiverPhone: i.receiverPhone,
        shortName: i.shortName
      }
    })
  }

  getExpressList = () => {
    OrderService.selectExpressList().then(res => {
      this.setState({
        deliverOptions: res || []
      })
    })
  }

  getAuditRecord = () => {
    OrderService.queryOrderAuditRecord({
      orderId: this.state.orderId
    }).then(res => {
      this.setState({
        auditRecord: res || []
      })
    })
  }

  handleCancel = e => {
    this.setState({
      visible: false,
      orderVisible: false
    })
  }

  handleCancels = e => {
    this.setState({
      visibles: false,
      visibles2: false,
      visibles3: false,
      visiblesimg: false
    })
  }

  onKaiImg = e => {
    this.setState({
      img: e,
      visiblesimg: true
    })
  }

  showModal = e => {
    this.setState({
      visible: true,
      titles: e
    })
  }

  getContentBetweenCommas(str) {
    const parts = str.split('_')
    if (parts.length > 2) {
      return parts[1] // 返回第二个逗号之后的内容
    }
    return '' // 如果没有两个逗号，则返回空字符串
  }

  settleDia = (type, orderId, userOrderCashId, record) => {
    const { userOrderCashesDto, userViolationRecords } = this.props
    if (userViolationRecords && userViolationRecords[0]) {
      let radioValue = 'good'
      radioValue = userOrderCashesDto.damagePrice ? 'damage' : radioValue
      radioValue = userOrderCashesDto.lostPrice ? 'lose' : radioValue
      this.setState({
        checkValue: true,
        radioValue,
        damageValue:
          userOrderCashesDto.damagePrice || userOrderCashesDto.lostPrice
      })
    }
    this.setState({
      orderId,
      userOrderCashId,
      record,
      orderVisible: 'settle'
    })
  }

  showOrderModal = (type, flag) => {
    const { userOrderInfoDto } = this.props
    if (['express', 'deliver'].includes(type)) {
      this.getExpressList()
    }
    if (type === 'settle') {
      this.settleDia()
    }
    if (type === 'audit') {
      if (flag) {
        // if (this.state.antRiskScore >= 0 && userOrderInfoDto.userFaceCertStatus) {
        //   this.setState({
        //     titles: '审批通过',
        //   });
        // } else {
        //   message.error('请确认用户已通过【人脸认证】再进行审批操作。');
        //   return;
        // }
        this.setState({
          titles: '审批通过'
        })
      } else {
        this.setState({
          titles: '审批拒绝'
        })
      }
    }

    this.setState({
      orderVisible: type
    })
  }

  viewCredit = id => {
    this.props.dispatch({
      type: 'order/getCreditV3',
      payload: {
        uid: id,
        orderId: getParam('id'),
        reportType: '21'
      },
      callback: res => {
        let _data = res.data.reportResult
          ? JSON.parse(res.data.reportResult)
          : {}
        if (_data.code === '00' || _data.code === '100002') {
          this.setState({
            brData1: _data || {}
          })
        }
      }
    })
    this.props.dispatch({
      type: 'order/getCreditV3',
      payload: {
        uid: id,
        orderId: getParam('id'),
        reportType: '24'
      },
      callback: res => {
        let _data = res.data.reportResult
          ? JSON.parse(res.data.reportResult)
          : {}
        if (_data.code === '00' || _data.code === '100002') {
          this.setState({
            brData4: _data || {}
          })
        }
      }
    })
    this.props.dispatch({
      type: 'order/getCreditV3',
      payload: {
        uid: id,
        orderId: getParam('id'),
        reportType: '26'
      },
      callback: res => {
        let _data = res.data.reportResult
          ? JSON.parse(res.data.reportResult)
          : {}
        if (_data.code === '00' || _data.code === '100002') {
          this.setState({
            brData5: _data || {}
          })
        }
      }
    })
    this.props.dispatch({
      type: 'order/getCreditV3',
      payload: {
        uid: id,
        orderId: getParam('id'),
        reportType: '22'
      },
      callback: res => {
        let _data = res.data.reportResult
          ? JSON.parse(res.data.reportResult)
          : {}
        if (_data.code === '00' || _data.code === '100002') {
          let dataArr = []
          let newJson = {}
          let caseArr = []
          for (let key in _data) {
            if (/\d/.test(key) && key.indexOf('ej_jd') != -1) {
              newJson[key] = _data[key]
            }
          }
          for (let key in newJson) {
            caseArr.push(this.getContentBetweenCommas(key))
          }
          caseArr = Array.from(new Set(caseArr)) //去重
          let lastJson = {}
          caseArr.map(item => {
            lastJson[item] = {}
            for (let key in newJson) {
              if (key.indexOf('_' + item + '_') != -1) {
                if (key.indexOf('_name') != -1) {
                  lastJson[item]['name'] = newJson[key]
                }
                if (key.indexOf('_body') != -1) {
                  lastJson[item]['body'] = newJson[key]
                }
                if (key.indexOf('_dataType') != -1) {
                  lastJson[item]['dataType'] = newJson[key]
                }
                if (key.indexOf('_caseCause') != -1) {
                  lastJson[item]['caseCause'] = newJson[key]
                }
                if (key.indexOf('_caseNo') != -1) {
                  lastJson[item]['caseNo'] = newJson[key]
                }
                if (
                  key.indexOf('_court') != -1 &&
                  key.indexOf('_courtRank') == -1
                ) {
                  lastJson[item]['court'] = newJson[key]
                }
                if (key.indexOf('_judgeResult') != -1) {
                  lastJson[item]['judgeResult'] = newJson[key]
                }
                if (key.indexOf('_sortTimeString') != -1) {
                  lastJson[item]['sortTimeString'] = newJson[key]
                }
                // lastJson[item][key] = newJson[key]
              }
            }
          })
          for (let key in lastJson) {
            dataArr.push(lastJson[key])
          }
          _data.ExecutionJud = dataArr
          console.log(_data.ExecutionJud)
          this.setState({
            brData6: _data || {}
          })
        }
      }
    })

    this.props.dispatch({
      type: 'order/getCreditV3',
      payload: {
        uid: id,
        orderId: getParam('id'),
        reportType: '13'
      },
      callback: res => {
        // {"rpcResult":"SUCCESS","httpStatus":200,"responseType":"SUCCESS","errorCode":null,"errorMessage":null,"data":{"reportResult":"{\"success\":true,\"data\":{\"fee\":\"Y\",\"code\":\"0\",\"desc\":\"查询成功\",\"trans_id\":\"f7f6b7d5-bd38-45f3-bb18-b8137e16d469\",\"trade_no\":\"20221229103900818000000009448865\",\"id_no\":\"1b0b0dbf7650414b7117fcaadce9ddad\",\"id_name\":\"36c942351ec9cc3ad124e288a5c9cf0b\",\"versions\":\"1.4.0\",\"result_detail\":{\"currently_overdue\":\"1\",\"max_overdue_amt\":\"1000-2000\",\"acc_sleep\":\"1\",\"currently_performance\":\"0\",\"result_code\":\"1\",\"max_overdue_days\":\"1-15\",\"latest_overdue_time\":\"2018-01\",\"acc_exc\":\"0\"}},\"errorCode\":null,\"errorMsg\":null}\r\n","reportType":"03","queryTime":"2022-12-29 10:38:59"}
        let _data = JSON.parse(res.data.reportResult)
        if (_data.code == '0000') {
          this.setState({
            brData2: _data.data || {}
          })
        }
      }
    })

    this.props.dispatch({
      type: 'order/getCreditV4',
      payload: {
        orderId: getParam('id')
      },
      callback: res => {
        this.setState({
          brData3: res.data || {}
        })
      }
    })
  }

  // //银行资产结清通知
  // assetCancelAgreeNotify = () => {
  //   OrderService.assetCancelAgreeNotify({ orderId: getParam('id'),settledType:2}).then(res => {
  //     if(res && res.returnCode == '000000'){
  //       message.success('资产结清通知成功')
  //     }else{
  //       message.error((res && res.returnMsg) || '资产结清通知失败')
  //     }
  //   })
  // }

  // 获取合同id
  getSignDownloadUrl = () => {
    const { signFlowId } = this.props
    OrderService.getSignDownloadUrl({ flowId: signFlowId }).then(res => {
      if (res && res.data.body.code == 0) {
        location.href = res.data.body.data.files[0].downloadUrl
      } else {
        message.error((res && res.data.body.message) || '未获取到签约合同')
      }
    })
  }

  // 关闭分期订单-线下履约
  closeStageOrder = (orderid, period) => {
    const { dispatch } = this.props
    dispatch({
      type: 'order/closeStageOrder',
      payload: {
        orderId: orderid,
        currentPeriods: period
      },
      callback: res => {
        message.success('分期账单关闭成功。')
        this.queryOrderStage()
      }
    })
  }

  // 碎屏险-线下履约
  closeBroken = orderId => {
    const { dispatch } = this.props
    dispatch({
      type: 'order/closeBroken',
      payload: {
        orderId: orderId
      },
      callback: res => {
        message.success('碎屏险线下履约成功。')
        this.onRentRenewalDetail()
      }
    })
  }

  // 碎屏险-线下履约
  closeOverdue = (orderId, periods) => {
    const { dispatch } = this.props
    dispatch({
      type: 'order/closeBroken',
      payload: {
        orderId: orderId,
        currentPeriods: periods
      },
      callback: res => {
        message.success('逾期费线下履约成功。')
        this.onRentRenewalDetail()
      }
    })
  }

  tabChange = key => {
    const { userOrderInfoDto } = this.props
    if (key === '3') {
      this.getAuditRecord()
    }
    if (key === '6') {
      this.fetchProcessDetail()
    }
    if (key === '2') {
      this.viewCredit(userOrderInfoDto.uid)
    }
    this.setState({
      activeTab: key
    })
  }

  // 驳回公证
  signReject = () => {
    OrderService.signReject({
      orderId: this.state.orderId
    }).then(res => {
      console.log(res)
      if (res) {
        this.onRentRenewalDetail()
      }
    })
  }

  // 通过公证
  signPass = () => {
    OrderService.signPass({
      orderId: this.state.orderId
    }).then(res => {
      if (res) {
        this.onRentRenewalDetail()
      }
    })
  }

  renderOrderInfoTab() {
    const {
      userOrderInfoDto = {},
      orderAdditionalServicesDto = {},
      orderAddressDto,
      amountInfoDto,
      opeRemarkDtoPage,
      businessRemarkDtoPage,
      productInfo,
      rentStart,
      rentDuration,
      unrentTime,
      shopInfoDto = {}
    } = this.props

    const zengzhiList = this.props.orderAdditionalServicesList || []

    const orderId = getParam('id')
    return (
      <div>
        <Descriptions>
          <Descriptions.Item label="订单号" span={3}>
            {orderId}
          </Descriptions.Item>
          {this.props.contractUrl ? (
            <Descriptions.Item label="用户租赁协议">
              <a href={this.props.contractUrl} target="_blank">
                《租赁协议》
              </a>
            </Descriptions.Item>
          ) : null}
        </Descriptions>

        {orderAddressDto ? (
          <>
            <Descriptions
              title={
                <>
                  <CustomCard title="收货人信息" />
                </>
              }
            >
              <Descriptions.Item label="收货人姓名">
                {orderAddressDto && orderAddressDto.realname}
              </Descriptions.Item>
              <Descriptions.Item label="收货人手机号">
                {orderAddressDto && orderAddressDto.telephone}
              </Descriptions.Item>
              <Descriptions.Item label="收货人地址">
                {orderAddressDto && orderAddressDto.provinceStr}
                {orderAddressDto && orderAddressDto.cityStr}
                {orderAddressDto && orderAddressDto.areaStr}
                {orderAddressDto && orderAddressDto.street}
              </Descriptions.Item>
              <Descriptions.Item label="用户备注">
                {userOrderInfoDto.remark}
              </Descriptions.Item>
            </Descriptions>
            <Divider />
          </>
        ) : null}

        {amountInfoDto ? (
          <>
            <Descriptions
              title={
                <>
                  <CustomCard title="已收金额信息" />
                </>
              }
            >
              <Descriptions.Item label="预授权冻结金额">
                {amountInfoDto && (amountInfoDto.authFreezeAmt || 0)}
              </Descriptions.Item>
              <Descriptions.Item label="预授权解冻金额">
                {amountInfoDto && (amountInfoDto.authReleaseAmt || 0)}
              </Descriptions.Item>
              <Descriptions.Item label="预授权转支付的金额">
                {amountInfoDto && (amountInfoDto.authPayAmt || 0)}
              </Descriptions.Item>
              <Descriptions.Item label="增值服务金额">
                {amountInfoDto && (amountInfoDto.addServiceAmt || 0)}
              </Descriptions.Item>
              <Descriptions.Item label="押金总金额/期数">
                {amountInfoDto && (amountInfoDto.depositAmt || 0)}/
                {amountInfoDto && (amountInfoDto.period || 0)}期
              </Descriptions.Item>
            </Descriptions>
            <Divider />
          </>
        ) : null}

        <Descriptions title={<CustomCard title="商家信息" />}>
          <Descriptions.Item label="商家名称">
            {shopInfoDto.shopName}
          </Descriptions.Item>
          <Descriptions.Item label="商家电话" span={2}>
            {shopInfoDto.telephone}
          </Descriptions.Item>
        </Descriptions>
        <Divider />

        <CustomCard title="商品信息" style={{ marginBottom: 20 }} />
        <AntTable
          columns={columnsInformation}
          dataSource={onTableData(productInfo)}
          paginationProps={paginationProps}
        />

        <Descriptions title={<CustomCard title="租用信息" />}>
          <Descriptions.Item label="租用天数">{rentDuration}</Descriptions.Item>
          <Descriptions.Item label="起租时间">{rentStart}</Descriptions.Item>
          <Descriptions.Item label="归还时间">{unrentTime}</Descriptions.Item>
        </Descriptions>
        <Divider />

        {/* <CustomCard title="增值服务" style={{ marginBottom: 20 }} />
        {userOrderInfoDto.hasBrokenConfig ? (
          <div>
            <Descriptions.Item label="碎屏险">
              碎屏险：{userOrderInfoDto.brokenAmount}元
            </Descriptions.Item>
            <br />
            <Descriptions.Item label="支付状态">
              支付状态：
              {userOrderInfoDto.brokenConfigStatus == '0'
                ? `未支付`
                : userOrderInfoDto.brokenConfigStatus == '1'
                ? '已支付'
                : '已退款'}
            </Descriptions.Item>
            &emsp;
            {userOrderInfoDto.brokenConfigStatus == '0' ? (
              <Popconfirm
                title="碎屏险是否线下履约?"
                onConfirm={() => this.closeBroken(userOrderInfoDto.orderId)}
              >
                <Button type="primary" size="small">
                  线下履约
                </Button>
              </Popconfirm>
            ) : null}
          </div>
        ) : (
          '无'
        )}
        <Divider /> */}
        {/* <AntTable */}
        {/*  columns={columnsAddService} */}
        {/*  dataSource={zengzhiList} */}
        {/*  // dataSource={onTableData([orderAdditionalServicesDto])} */}
        {/*  paginationProps={paginationProps} */}
        {/* /> */}

        <CustomCard title="商家备注" style={{ marginBottom: 20 }} />
        {/* <Button */}
        {/*  type="primary" */}
        {/*  style={{ margin: '20px 0' }} */}
        {/*  onClick={() => this.showOrderModal('remark')} */}
        {/* > */}
        {/*  + 新建备注 */}
        {/* </Button> */}
        <MyPageTable
          onPage={this.onPageBusiness}
          paginationProps={{
            current: this.state.scurrent,
            pageSize: 3,
            total: businessRemarkDtoPage.total
          }}
          dataSource={onTableData(businessRemarkDtoPage.records)}
          columns={columnsBusiness}
        />
        <Divider />
        <CustomCard title="平台备注" />
        <MyPageTable
          onPage={this.onPage}
          paginationProps={{
            current: this.state.xcurrent,
            pageSize: 3,
            total: opeRemarkDtoPage.total
          }}
          dataSource={onTableData(opeRemarkDtoPage.records)}
          columns={columns}
        />
      </div>
    )
  }

  // 在途订单
  renderPayedOrder() {
    const { userOrderInfoDto = {} } = this.props

    return (
      <div>
        <Descriptions title={<CustomCard title="在途订单" />}>
          <Descriptions.Item label="在途订单数">
            {userOrderInfoDto.userPayCount}
          </Descriptions.Item>
        </Descriptions>
        <AntTable
          columns={payedOrderColumnsInformation}
          dataSource={onTableData(userOrderInfoDto.userPayOrders)}
          paginationProps={paginationProps}
        />

        <Descriptions title={<CustomCard title="完结订单" />}>
          <Descriptions.Item label="完结订单数">
            {userOrderInfoDto.userFinishCount}
          </Descriptions.Item>
        </Descriptions>
        <AntTable
          columns={payedOrderColumnsInformation}
          dataSource={onTableData(userOrderInfoDto.userFinishOrders)}
          paginationProps={paginationProps}
        />

        <Descriptions title={<CustomCard title="历史订单" />}>
          <Descriptions.Item label="历史订单数">
            {userOrderInfoDto.userHistoryCount}
          </Descriptions.Item>
        </Descriptions>
        <AntTable
          columns={payedOrderColumnsInformation}
          dataSource={onTableData(userOrderInfoDto.userHistoryOrders)}
          paginationProps={paginationProps}
        />
      </div>
    )
  }

  renderRiskTab() {
    const riskColumns = [
      {
        title: '综合评分',
        dataIndex: 'userName'
      },
      {
        title: '审批建议',
        dataIndex: 'createTime'
      },
      {
        title: '分值标注说明',
        dataIndex: 'remark'
      }
    ]
    const riskLevelColumns = [
      {
        title: '等级',
        dataIndex: 'userName'
      },
      {
        title: '审批建议',
        dataIndex: 'createTime'
      },
      {
        title: '说明',
        dataIndex: 'remark'
      }
    ]
    const {
      userOrderInfoDto = {},
      orderAddressDto,
      productInfo,
      userOrderCashesDto,
      orderBuyOutDto,
      wlList
    } = this.props
    const {
      drawerVisible,
      visibles,
      visibles2,
      visibles3,
      creditEmpty
    } = this.state
    const { getFieldDecorator } = this.props.form

    // console.log('orderBuyOutDto:', orderBuyOutDto);
    if (creditEmpty) {
      return '风险报告查询中，请稍后再来查看'
    }
    return (
      <div>
        {visibles ? (
          <CreditDetail
            userOrders={userOrderInfoDto}
            creditInfo={this.state.creditInfo}
            userOrderInfoDto={userOrderInfoDto}
            orderAddressDto={orderAddressDto}
            productInfo={productInfo}
            userOrderCashesDto={userOrderCashesDto}
            comprehensiveSuggest={this.state.comprehensiveSuggest}
            nsfLevel={this.state.nsfLevel}
          />
        ) : null}
        {visibles2 ? (
          <CreditDetailOld
            userOrders={userOrderInfoDto}
            creditInfo={this.state.creditInfo}
            userOrderInfoDto={userOrderInfoDto}
            orderAddressDto={orderAddressDto}
            productInfo={productInfo}
            userOrderCashesDto={userOrderCashesDto}
            comprehensiveSuggest={this.state.comprehensiveSuggest}
          />
        ) : null}
        {visibles3 ? (
          <CreditDetailThree
            userOrders={userOrderInfoDto}
            creditInfo={this.state.creditInfo}
            userOrderInfoDto={userOrderInfoDto}
            orderAddressDto={orderAddressDto}
            productInfo={productInfo}
            userOrderCashesDto={userOrderCashesDto}
            comprehensiveSuggest={this.state.comprehensiveSuggest}
            nsfLevel={this.state.nsfLevel}
            antiCheatingLevel={this.state.antiCheatingLevel}
          />
        ) : null}
      </div>
    )
  }

  renderAuditTab() {
    const { auditRecord = {} } = this.state

    return (
      <div>
        <Descriptions>
          <Descriptions.Item label="审批时间" span={3}>
            {auditRecord.approveTime}
          </Descriptions.Item>
          <Descriptions.Item label="审批人" span={3}>
            {auditRecord.approveUserName}
          </Descriptions.Item>
          <Descriptions.Item label="审批结果" span={3}>
            {AuditStatus[auditRecord.approveStatus]}
          </Descriptions.Item>
          {auditRecord.approveStatus === '02' && (
            <Descriptions.Item label="拒绝类型" span={3}>
              {AuditReason[auditRecord.refuseType]}
            </Descriptions.Item>
          )}
          <Descriptions.Item label="小记" span={3}>
            {auditRecord.remark}
          </Descriptions.Item>
        </Descriptions>
      </div>
    )
  }

  renderExpressTab() {
    const { receiptExpressInfo, giveBackExpressInfo } = this.props
    return (
      <div>
        {giveBackExpressInfo ? (
          <>
            <Descriptions title={<CustomCard title="归还物流信息" />}>
              <Descriptions.Item label="发货物流公司">
                {giveBackExpressInfo.expressCompany}
              </Descriptions.Item>
              <Descriptions.Item label="发货物流单号">
                {giveBackExpressInfo.expressNo}
              </Descriptions.Item>
              <Descriptions.Item label="归还时间">
                {giveBackExpressInfo.deliveryTime}
              </Descriptions.Item>
            </Descriptions>
            <Button
              onClick={() =>
                this.onLogistics('归还物流信息', giveBackExpressInfo)
              }
            >
              查看物流
            </Button>
            <Divider />
          </>
        ) : null}
        {receiptExpressInfo ? (
          <>
            <Descriptions title={<CustomCard title="发货物流信息" />}>
              <Descriptions.Item label="发货物流公司">
                {receiptExpressInfo.expressCompany}
              </Descriptions.Item>
              <Descriptions.Item label="发货物流单号">
                {receiptExpressInfo.expressNo}
              </Descriptions.Item>
              <Descriptions.Item label="发货时间">
                {receiptExpressInfo.deliveryTime}
              </Descriptions.Item>
            </Descriptions>
            <Button
              onClick={() =>
                this.onLogistics('发货物流信息', receiptExpressInfo)
              }
            >
              查看物流
            </Button>
            <Divider />
          </>
        ) : null}
      </div>
    )
  }

  renderBillTab() {
    const {
      userOrderCashesDto = {},
      orderByStagesDtoList = [],
      orderBuyOutDto = {},
      settlementInfoDto = {}
    } = this.state.queryOrderStagesDetail
    const { amountInfoDto } = this.props
    const columnsByStages = [
      {
        title: '总期数',
        dataIndex: 'totalPeriods',
        width: '80px'
      },
      {
        title: '当前期数',
        dataIndex: 'currentPeriods',
        width: '80px'
      },
      {
        title: '租金',
        dataIndex: 'currentPeriodsRent'
      },
      {
        title: '商家流水号',
        dataIndex: 'outTransNo',
        width: '200px'
      },
      {
        title: '支付宝流水号',
        dataIndex: 'tradeNo',
        width: '200px'
      },
      {
        title: '状态',
        dataIndex: 'status',
        align: 'center', // render: status => <span>{columnsByStagesStute[status]}</span>,
        render: (status, record) => {
          const payedArry = ['1', '4']
          // '1': '待支付',
          //   '2': '已支付',
          //   '3': '逾期已支付',
          //   '4': '逾期待支付',
          //   '5': '已取消',
          //   '6': '已结算',
          //   '7': '已退款,可用',
          return (
            <>
              {record.debitStatus === 2 ? (
                <>
                  <span
                    style={{
                      color: payedArry.includes(record.status) ? '#E83F40' : ''
                    }}
                  >
                    扣款中
                  </span>
                </>
              ) : (
                <>
                  <span
                    style={{
                      color: payedArry.includes(record.status) ? '#E83F40' : ''
                    }}
                  >
                    {columnsByStagesStute[record.status]}
                  </span>
                  <br />
                  <Popconfirm
                    title="是否关闭该期租金?"
                    onConfirm={() =>
                      this.closeStageOrder(
                        record.orderId,
                        record.currentPeriods
                      )
                    }
                  >
                    <Button
                      style={{
                        display: payedArry.includes(record.status) ? '' : 'none'
                      }}
                      type="primary"
                      size="small"
                    >
                      线下履约
                    </Button>
                  </Popconfirm>
                </>
              )}
            </>
          )
        }
      },
      {
        title: '支付时间',
        dataIndex: 'repaymentDate'
      },
      {
        title: '账单到期时间',
        dataIndex: 'statementDate'
      },
      {
        title: '逾期信息',
        dataIndex: 'overdueDays',
        render: (status, record) => {
          // '1': '待支付',
          //   '2': '已支付',
          //   '3': '逾期已支付',
          //   '4': '逾期待支付',
          //   '5': '已取消',
          //   '6': '已结算',
          //   '7': '已退款,可用',
          return (
            <>
              {record.overdueDays > 0 ? (
                <>
                  <span style={{ color: '#fa541c' }}>
                    逾期天数：{record.overdueDays}
                    <br />
                  </span>
                  <span
                    style={{
                      color: '#fa541c',
                      display: record.overdueFee > 0 ? '' : 'none'
                    }}
                  >
                    逾期费：{record.overdueFee}
                    <br />
                  </span>
                  <span
                    style={{
                      color: '#fa541c',
                      display: record.overdueFee > 0 ? '' : 'none'
                    }}
                  >
                    支付状态：
                    {record.overdueFeePayStatus !== '2' ? '未支付' : '已支付'}
                    <br />
                  </span>
                  <span
                    style={{
                      color: '#fa541c',
                      display: record.overdueFee > 0 ? '' : 'none'
                    }}
                  >
                    协商逾期费：
                    {record.businessOverdueFee < 0
                      ? '未设置'
                      : record.businessOverdueFee}
                    <br />
                  </span>
                  <Popconfirm
                    title="是否线下履约逾期费?"
                    onConfirm={() =>
                      this.closeOverdue(record.orderId, record.currentPeriods)
                    }
                  >
                    <Button
                      style={{
                        display:
                          record.overdueFee > 0 &&
                          record.overdueFeePayStatus !== '2'
                            ? ''
                            : 'none'
                      }}
                      type="primary"
                      size="small"
                    >
                      线下履约
                    </Button>
                  </Popconfirm>
                </>
              ) : null}
            </>
          )
        }
      }
    ]
    return (
      <Card bordered={false}>
        {settlementInfoDto ? (
          <>
            <CustomCard title="结算信息" style={{ marginBottom: 20 }} />
            <AntTable
              columns={columnsSettlement}
              dataSource={onTableData([settlementInfoDto])}
              paginationProps={paginationProps}
            />
          </>
        ) : null}

        <CustomCard title="账单信息" style={{ marginBottom: 20 }} />
        <AntTable
          columns={columnsBill}
          dataSource={onTableData([userOrderCashesDto])}
          paginationProps={paginationProps}
        />
        {/* <CustomCard title="增值服务" style={{ marginBottom: 20 }} />
        {userOrderInfoDto.hasBrokenConfig ? (
          <div>
            <Descriptions.Item label="碎屏险">
              碎屏险：{userOrderInfoDto.brokenAmount}元
            </Descriptions.Item>
            <br />
            <Descriptions.Item label="支付状态">
              支付状态：
              {userOrderInfoDto.brokenConfigStatus == '0'
                ? `未支付`
                : userOrderInfoDto.brokenConfigStatus == '1'
                ? '已支付'
                : '已退款'}
            </Descriptions.Item>
            &emsp;
            {userOrderInfoDto.brokenConfigStatus == '0' ? (
              <Popconfirm
                title="碎屏险是否线下履约?"
                onConfirm={() => this.closeBroken(userOrderInfoDto.orderId)}
              >
                <Button type="primary" size="small">
                  线下履约
                </Button>
              </Popconfirm>
            ) : null}
          </div>
        ) : (
          '无'
        )}
        <Divider /> */}
        {amountInfoDto ? (
          <>
            <Descriptions
              title={
                <>
                  <CustomCard title="已收金额信息" />
                </>
              }
            >
              <Descriptions.Item label="预授权冻结金额">
                {amountInfoDto && (amountInfoDto.authFreezeAmt || 0)}
              </Descriptions.Item>
              <Descriptions.Item label="预授权解冻金额">
                {amountInfoDto && (amountInfoDto.authReleaseAmt || 0)}
              </Descriptions.Item>
              <Descriptions.Item label="预授权转支付的金额">
                {amountInfoDto && (amountInfoDto.authPayAmt || 0)}
              </Descriptions.Item>
              <Descriptions.Item label="增值服务金额">
                {amountInfoDto && (amountInfoDto.addServiceAmt || 0)}
              </Descriptions.Item>
              <Descriptions.Item label="押金总金额/期数">
                {amountInfoDto && (amountInfoDto.depositAmt || 0)}/
                {amountInfoDto && (amountInfoDto.period || 0)}期
              </Descriptions.Item>
            </Descriptions>
            <Divider />
          </>
        ) : null}
        <CustomCard title="分期信息" style={{ marginBottom: 20 }} />
        <AntTable
          columns={columnsByStages}
          dataSource={onTableData(orderByStagesDtoList)}
          paginationProps={paginationProps}
        />
        {orderBuyOutDto.orderId ? (
          <>
            <CustomCard title="买断信息" style={{ marginBottom: 20 }} />
            <AntTable
              columns={
                orderBuyOutDto.payFlag ? columnsBuyOutYes : columnsBuyOutNo
              }
              dataSource={onTableData([orderBuyOutDto])}
              paginationProps={paginationProps}
            />
          </>
        ) : null}
      </Card>
    )
  }

  renderProcessTab() {
    const { processDetail = [] } = this.state
    const { userOrderInfoDto = {} } = this.props
    return (
      <Card
        className="remove-card-bottom-border"
        title={<CustomCard title="订单进度" />}
        bordered={false}
      >
        <Steps
          direction="vertical"
          progressDot={document.body.clientWidth >= 1025}
          current={processDetail.length}
        >
          {processDetail.map(item => {
            const desc = (
              <div style={{ width: 300 }}>
                <div>{item.operatorName}</div>
                <div>{item.createTime}</div>
              </div>
            )
            return (
              <Step
                title={item.operate}
                key={item.operate}
                description={desc}
              />
            )
          })}
        </Steps>
      </Card>
    )
  }

  renderContentTabCard() {
    const { userOrderInfoDto } = this.props
    const {
      activeTab,
      redata,
      brData1,
      brData2,
      brData3,
      brData4,
      brData5,
      brData6
    } = this.state
    const { status } = userOrderInfoDto
    const personal_loan_demand = redata.personal_loan_demand || {}
    const { wx_datad7, wx_datam1, wx_datam3 } = personal_loan_demand
    // console.log(redata,'redataredata')
    const applyQuerySeven = wx_datad7 || []
    const applyQuerythrity = wx_datam1 || []
    const applyQueryninety = wx_datam3 || []
    const applyQuerySevendata = []
    const applyQuerythritydata = []
    const applyQueryninetydata = []
    for (const key in applyQuerySeven) {
      const seven = {}
      seven.day = applyQuerySeven[key]
      applyQuerySevendata.push(seven)
    }
    for (const key in applyQuerythrity) {
      const seven = {}
      seven.day = applyQuerythrity[key]
      applyQuerythritydata.push(seven)
    }
    for (const key in applyQueryninety) {
      const seven = {}
      seven.day = applyQueryninety[key]
      applyQueryninetydata.push(seven)
    }

    return (
      <Card bordered={false} style={{ marginTop: 20 }}>
        <Tabs activeKey={activeTab} onChange={this.tabChange}>
          <TabPane tab="订单信息" key="1">
            {this.renderOrderInfoTab()}
          </TabPane>
          {/* {!['02', '01'].includes(status) ? ( */}
          <TabPane tab="风险报告" key="2">
            <BairongReport
              brdata1={brData1}
              brdata2={brData2}
              brdata3={brData3}
              brdata4={brData4}
              brdata5={brData5}
              brdata6={brData6}
            />
          </TabPane>
          <TabPane tab="在途订单" key="7">
            {this.renderPayedOrder()}
          </TabPane>
          {/* ) : null} */}
          {!['01', '02', '11'].includes(status) ? (
            <TabPane tab="审批结论" key="3">
              {this.renderAuditTab()}
            </TabPane>
          ) : null}
          {!['01', '02', '04', '11'].includes(status) ? (
            <TabPane tab="物流信息" key="4">
              {this.renderExpressTab()}
            </TabPane>
          ) : null}
          <TabPane tab="账单信息" key="5">
            {this.renderBillTab()}
          </TabPane>
          {getParam('settlement') ? (
            <TabPane tab="催收记录" key="10">
              {this.renderCollectionRecord()}
            </TabPane>
          ) : null}
          <TabPane tab="流程进度" key="6">
            {this.renderProcessTab()}
          </TabPane>
        </Tabs>
      </Card>
    )
  }

  // OrderService
  onHasten = (pageNumber, pageSize, source) => {
    OrderService.queryOrderHasten({
      pageNumber,
      pageSize,
      source,
      orderId: getParam('id')
    }).then(res => {
      if (source === '02') {
        this.setState({
          HastenList: res.records,
          HastenTotal: res.total
        })
      } else {
        this.setState({
          opeHastenList: res.records,
          opeHastenTotal: res.total
        })
      }
    })
  }

  onHastenBusiness = e => {
    this.setState(
      {
        HastenCurrent: e.current
      },
      () => {
        this.onHasten(e.current, 3, '02')
      }
    )
  }

  onHastenOpe = e => {
    this.setState(
      {
        opeHastenCurrent: e.current
      },
      () => {
        this.onHasten(e.current, 3, '01')
      }
    )
  }

  renderCollectionRecord() {
    const { orderVisible } = this.state
    console.log(orderVisible === 'remarks', 'orderVisibleorderVisible')
    const { getFieldDecorator } = this.props.form
    return (
      <div>
        <CustomCard title="商家催收" style={{ marginBottom: 20 }} />
        <MyPageTable
          onPage={this.onHastenBusiness}
          columns={BusinessCollection}
          dataSource={onTableData(this.state.HastenList)}
          paginationProps={{
            current: this.state.HastenCurrent,
            pageSize: 3,
            total: this.state.HastenTotal
          }}
        />
        <CustomCard title="平台催收" style={{ marginBottom: 20 }} />
        <MyPageTable
          onPage={this.onHastenOpe}
          columns={BusinessCollection}
          dataSource={onTableData(this.state.opeHastenList)}
          paginationProps={{
            current: this.state.opeHastenCurrent,
            pageSize: 3,
            total: this.state.opeHastenTotal
          }}
        />
      </div>
    )
  }

  renderRemarkModal() {
    const { orderVisible } = this.state
    const { getFieldDecorator } = this.props.form
    const orderId = getParam('id')
    const handleOk = e => {
      e.preventDefault()
      this.props.form.validateFields(['beizhu'], (err, values) => {
        if (!err) {
          const { dispatch } = this.props
          dispatch({
            type: 'order/orderRemark',
            payload: {
              orderId,
              remark: values.beizhu,
              orderType: '01'
            },
            callback: res => {
              this.onPage()
              this.handleCancel()
              this.props.form.resetFields()
            }
          })
        }
      })
    }

    return (
      <div>
        <Modal
          title="备注"
          visible={orderVisible === 'remark'}
          onOk={handleOk}
          onCancel={this.handleCancel}
        >
          <Form>
            <Form.Item label="备注内容" {...formItemLayout}>
              {getFieldDecorator('beizhu', {
                rules: [{ required: true, message: '请输入备注' }]
              })(<TextArea placeholder="请输入" />)}
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }

  renderDeliverModal() {
    const { form } = this.props
    const { orderVisible, deliverOptions } = this.state
    const { getFieldDecorator } = form
    const orderId = getParam('id')
    const handleOk = e => {
      e.preventDefault()
      this.props.form.validateFields(
        ['expressId', 'expressNo'],
        (err, fieldsValue) => {
          if (err) return
          OrderService.orderDelivery({
            ...fieldsValue,
            orderId
          }).then(res => {
            this.onRentRenewalDetail()
            this.props.form.resetFields()
            this.handleCancel()
          })
        }
      )
    }

    return (
      <Modal
        destroyOnClose
        title={orderVisible === 'express' ? '修改物流信息' : '快速发货'}
        visible={orderVisible === 'deliver' || orderVisible === 'express'}
        onOk={handleOk}
        width="450px"
        onCancel={this.handleCancel}
      >
        <Form>
          <FormItem>
            {form.getFieldDecorator('expressId', {
              rules: [{ required: true, message: '请选择物流公司' }]
            })(
              <Select style={{ width: '100%' }} placeholder="请选择物流公司">
                {deliverOptions.map(option => {
                  return (
                    <Option key={option.id} value={option.id}>
                      {option.name}
                    </Option>
                  )
                })}
              </Select>
            )}
          </FormItem>
          <FormItem>
            {form.getFieldDecorator('expressNo', {
              rules: [{ required: true, message: '请输入物流单号' }]
            })(<Input placeholder="请输入物流单号" />)}
          </FormItem>
        </Form>
      </Modal>
    )
  }

  renderCloseModal() {
    const { form } = this.props
    const { orderVisible, orderId } = this.state
    const handleOk = e => {
      this.props.form.validateFields(['closeReason'], (err, fieldsValue) => {
        if (err) return
        OrderService.closeUserOrderAndRefundPrice({
          ...fieldsValue,
          closeType: '07',
          orderId
        }).then(res => {
          this.onRentRenewalDetail()
          this.props.form.resetFields()
          this.handleCancel()
        })
      })
    }

    return (
      <Modal
        destroyOnClose
        title="关闭订单"
        visible={orderVisible === 'close'}
        onOk={handleOk}
        width="450px"
        onCancel={this.handleCancel}
      >
       <Form>
      <Form.Item
        label="小记" 
        rules={[
          {
            required: true,
            message: '请输入关单原因!',
          },
        ]}
      >
        {form.getFieldDecorator('closeReason', {
          rules: [
            {
              required: true,
              message: '请输入关单原因!',
            },
          ],
        })(<Input placeholder="请输入关单原因" />)}
      </Form.Item>
    </Form>
      </Modal>
    )
  }

  renderSettleModal() {
    const { form, userOrderCashesDto = {} } = this.props
    const { orderId, orderVisible, radioValue, damageValue } = this.state

    const onRadioChange = e => {
      this.setState({
        radioValue: e.target.value
      })
    }

    const handleDamageValue = val => {
      this.setState({
        damageValue: val
      })
    }

    const handleOk = e => {
      this.props.form.validateFields(
        ['penaltyAmount', 'cancelReason'],
        (err, fieldsValue) => {
          if (err) return
          const payload = {
            lossAmount: 0,
            damageAmount: 0,
            penaltyAmount: 0,
            settlementType: radioValue,
            ...fieldsValue,
            orderId
          }
          if (radioValue === '03') {
            payload.lossAmount = damageValue
          } else if (radioValue === '02') {
            payload.damageAmount = damageValue
          }
          OrderService.merchantsIssuedStatements(payload).then(res => {
            this.onRentRenewalDetail()
            this.props.form.resetFields()
            this.handleCancel()
          })
        }
      )
    }

    return (
      <Modal
        title="是否确认结算？"
        zIndex={2000}
        visible={orderVisible === 'settle'}
        onOk={handleOk}
        onCancel={this.handleCancel}
      >
        <div>
          <div>
            <span style={{ marginRight: '20px' }}>宝贝状态</span>
            <Radio.Group onChange={onRadioChange} value={radioValue}>
              <Radio value="01">完好</Radio>
              <Radio value="02">损坏</Radio>
              <Radio value="03">丢失</Radio>
              <Radio value="04">其他</Radio>
            </Radio.Group>
            {radioValue === '02' && (
              <div style={{ display: 'inline-block', marginTop: '20px' }}>
                <span>损坏赔偿金：</span>
                <InputNumber
                  min={0}
                  defaultValue={0}
                  value={damageValue}
                  onChange={handleDamageValue}
                />
                <span>元</span>
              </div>
            )}
            {radioValue === '03' && (
              <div style={{ display: 'inline-block', marginTop: '20px' }}>
                <span>丢失赔偿金：</span>
                <InputNumber
                  min={0}
                  defaultValue={0}
                  value={damageValue}
                  onChange={handleDamageValue}
                />
                <span>元</span>
              </div>
            )}
            {radioValue === '04' && (
              <div style={{ marginTop: '20px' }}>
                <Form.Item labelCol={{ span: 4 }} label="违约金：">
                  {form.getFieldDecorator('penaltyAmount', {
                    initialValue: userOrderCashesDto.penaltyAmount
                  })(<InputNumber min={0} />)}
                  <span> 元</span>
                </Form.Item>
                <Form.Item labelCol={{ span: 4 }} label="违约原因：">
                  {form.getFieldDecorator('cancelReason', {
                    initialValue: userOrderCashesDto.cancelReason
                  })(
                    <Input
                      style={{ width: '60%' }}
                      placeholder="请输入违约原因"
                    />
                  )}
                </Form.Item>
              </div>
            )}
          </div>
        </div>
      </Modal>
    )
  }

  renderAddressModal() {
    const {
      userOrderInfoDto = {},
      orderAddressDto,
      dispatch,
      productInfo,
      userOrderCashesDto,
      orderBuyOutDto,
      wlList
    } = this.props
    const { orderVisible, orderId } = this.state
    const { getFieldDecorator } = this.props.form
    const handleOk = e => {
      this.props.form.validateFields(
        ['realName', 'street', 'city', 'telephone'],
        (err, values) => {
          if (err) return
          dispatch({
            type: 'order/opeOrderAddressModify',
            payload: {
              realName: values.realName,
              street: values.street,
              telephone: values.telephone,
              province: values && values.city && values.city[0],
              city: values && values.city && values.city[1],
              area: values && values.city && values.city[2],
              orderId
            },
            callback: res => {
              this.onRentRenewalDetail()
              this.props.form.resetFields()
              this.handleCancel()
            }
          })
          // OrderService.businessClosePayedOrder({
          //   ...fieldsValue,
          //   orderId,
          // }).then(res => {
          //   this.onRentRenewalDetail()
          //   this.props.form.resetFields();
          //   this.handleCancel();
          // });
        }
      )
    }

    return (
      <Modal
        title="修改收货信息"
        visible={orderVisible === 'address'}
        onOk={handleOk}
        onCancel={this.handleCancel}
      >
        <Form>
          <Form.Item label="所在城市" {...formItemLayout}>
            {getFieldDecorator('city', {
              rules: [
                {
                  required: true,
                  message: '请输入备注'
                }
              ],
              initialValue: [
                orderAddressDto &&
                  orderAddressDto.province &&
                  orderAddressDto.province.toString(),
                orderAddressDto &&
                  orderAddressDto.city &&
                  orderAddressDto.city.toString(),
                orderAddressDto &&
                  orderAddressDto.area &&
                  orderAddressDto.area.toString()
              ]
            })(
              <Cascader
                options={optionsdata}
                fieldNames={{
                  label: 'name',
                  value: 'value',
                  children: 'subList'
                }}
              />
            )}
          </Form.Item>
          <Form.Item label="收货人姓名" {...formItemLayout}>
            {getFieldDecorator('realName', {
              rules: [{ required: true, message: '请输入备注' }],
              initialValue: orderAddressDto && orderAddressDto.realname
            })(<Input placeholder="请输入" />)}
          </Form.Item>
          <Form.Item label="收货人手机号" {...formItemLayout}>
            {getFieldDecorator('telephone', {
              rules: [{ required: true, message: '请输入备注' }],
              initialValue: orderAddressDto && orderAddressDto.telephone
            })(<Input placeholder="请输入" />)}
          </Form.Item>
          <Form.Item label="详细地址" {...formItemLayout}>
            {getFieldDecorator('street', {
              rules: [{ required: true, message: '请输入备注' }],
              initialValue: orderAddressDto && orderAddressDto.street
            })(<TextArea placeholder="请输入" />)}
          </Form.Item>
        </Form>
      </Modal>
    )
  }

  renderAuditModal() {
    const { form } = this.props
    const { orderVisible, orderId, titles } = this.state
    const handleOk = e => {
      this.props.form.validateFields(
        ['refuseType', 'auditRemark'],
        (err, fieldsValue) => {
          if (err) return
          OrderService.telephoneAuditOrder({
            ...fieldsValue,
            orderId,
            remark: fieldsValue.auditRemark,
            orderAuditStatus: titles === '审批通过' ? '01' : '02'
          }).then(res => {
            this.onRentRenewalDetail()
            this.props.form.resetFields()
            this.handleCancel()
          })
        }
      )
    }

    return (
      <Modal
        destroyOnClose
        title={titles}
        visible={orderVisible === 'audit'}
        onOk={handleOk}
        width="450px"
        onCancel={this.handleCancel}
      >
        <Form>
          {titles === '审批拒绝' ? (
            <FormItem label="拒绝类型" {...formItemLayout}>
              {form.getFieldDecorator('refuseType', {
                rules: [{ required: true, message: '请选择拒绝类型' }]
              })(
                <Select style={{ width: '100%' }} placeholder="请选择">
                  {Object.keys(AuditReason).map(option => {
                    return (
                      <Option key={option} value={option}>
                        {AuditReason[option]}
                      </Option>
                    )
                  })}
                </Select>
              )}
            </FormItem>
          ) : null}
          <FormItem label="小记" {...formItemLayout}>
            {form.getFieldDecorator('auditRemark', {
              rules: [{ required: true, message: '请输入小记' }]
            })(<Input.TextArea placeholder="请输入小记" />)}
          </FormItem>
        </Form>
      </Modal>
    )
  }

  // 基础信息按钮组
  renderBaseInfoButtons() {
    const { userOrderInfoDto = {}, queryAssetRiskRes, signFlowId } = this.props
    const orderId = getParam('id')
    const { auditLabel, status } = userOrderInfoDto
    return (
      <Fragment>
        {status === '11' || '111' ? (
          <Fragment>
            {auditLabel !== '01' && queryAssetRiskRes == 1 ? (
              <Fragment>
                <Button
                  type="primary"
                  onClick={() => this.showOrderModal('audit', true)}
                >
                  审批通过
                </Button>
              </Fragment>
            ) : null}
            <Button
              type="primary"
              onClick={() => this.showOrderModal('audit', false)}
            >
              审批拒绝
            </Button>
            <Button
              type="primary"
              onClick={() => this.showOrderModal('address')}
            >
              修改收货信息
            </Button>
          </Fragment>
        ) : null}
        {['01', '02'].includes(status) ? (
          <Button type="primary" onClick={() => this.showOrderModal('address')}>
            修改收货信息
          </Button>
        ) : null}
        {status === '04' ? (
          <Fragment>
            {/* <Button type="primary" onClick={() => this.showOrderModal('deliver')}> */}
            {/*  发货 */}
            {/* </Button> */}
            <Button
              type="primary"
              onClick={() => this.showOrderModal('address')}
            >
              修改收货信息
            </Button>
          </Fragment>
        ) : null}
        {status == '06' || status == '09' ? (
          <Fragment>
            <Button type="primary" className="button-color-dust" onClick={() => this.showOrderModal('settleNotice')}>
              银行资产结清通知
            </Button>
          </Fragment>
        ) : null}
        {status != '10' ? (
          <Fragment>
            <Button type="primary" onClick={() => this.showOrderModal('close')}>
              关闭订单
            </Button>
            {/* <Button type="primary" onClick={() => this.showOrderModal('express')}> */}
            {/*  修改物流信息 */}
            {/* </Button> */}
          </Fragment>
        ) : null}
        {/* {status === '07' ? ( */}
        {/*  <Button type="primary" onClick={ */}
        {/*    () => this.settleDia('settle', orderId, userOrderInfoDto.orderCashId, userOrderInfoDto) */}
        {/*  }>结算</Button> */}
        {/* ) : null} */}
        {getParam('settlement') ? (
          <Button type="primary" onClick={() => this.showOrderModal('remarks')}>
            记录催收
          </Button>
        ) : null}
        <Button type="primary" onClick={() => this.showOrderModal('remark')}>
          备注
        </Button>
        {signFlowId ? (
          <Button type="primary" onClick={() => this.getSignDownloadUrl()}>
            查看合同
          </Button>
        ) : null}
      </Fragment>
    )
  }

  // 用户定位信息转换
  getUserLocation = obj => {
    let location = '无定位信息'
    if (obj) {
      const locaInfo = JSON.parse(obj)
      if (locaInfo.error) {
        location = locationErrorType[locaInfo.error]
      } else {
        location =
          locaInfo.country +
          locaInfo.province +
          locaInfo.city +
          locaInfo.district +
          locaInfo.streetNumber.street +
          locaInfo.streetNumber.number
      }
    }

    return location
  }

  renderBaseInfo() {
    const {
      userOrderInfoDto = {},
      rentShopDto = {},
      queryAssetRiskRes,
      orderChgzContractDto,
      orderAntChainContractDto = {}
    } = this.props
    const { queryLoading } = this.state
    return (
      <Card bordered={false} style={{ marginTop: 20 }}>
        <Descriptions title={<CustomCard title="下单人信息" />}>
          <Descriptions.Item label="姓名">
            {userOrderInfoDto.userName}
          </Descriptions.Item>
          <Descriptions.Item label="手机号">
            {userOrderInfoDto.telephone}
          </Descriptions.Item>
          <Descriptions.Item label="身份证号">
            {userOrderInfoDto.idCard}
          </Descriptions.Item>
          <Descriptions.Item label="年龄">
            {userOrderInfoDto.age}
          </Descriptions.Item>
          <Descriptions.Item label="性别">
            {userOrderInfoDto.gender}
          </Descriptions.Item>
          <Descriptions.Item label="下单时间">
            {userOrderInfoDto.createTime}
          </Descriptions.Item>
          <Descriptions.Item label="在途订单数">
            {userOrderInfoDto.userPayCount > 1 ? (
              <span style={{ fontWeight: 'bold' }} className="red-status">
                {userOrderInfoDto.userPayCount}
                &emsp;(用户在平台有多笔在途订单，请注意！)
              </span>
            ) : (
              userOrderInfoDto.userPayCount
            )}
          </Descriptions.Item>
          <Descriptions.Item label="完结订单数">
            {userOrderInfoDto.userFinishCount}
          </Descriptions.Item>
          <Descriptions.Item label="订单状态">
            {orderStatusMap[userOrderInfoDto.status]}
          </Descriptions.Item>
          {/* <Descriptions.Item label="人脸认证" span={1}>
            {userOrderInfoDto.userFaceCertStatus ? (
              <span className="green-status">已通过</span>
            ) : (
              <span className="red-status">未通过</span>
            )}
          </Descriptions.Item> */}
          <Descriptions.Item label="接单商家">
            {rentShopDto ? (
              <>
                【{rentShopDto.name}】{rentShopDto.serviceTel}{' '}
              </>
            ) : (
              '未分配'
            )}
          </Descriptions.Item>
          <Descriptions.Item label="订单定位信息">
            {this.getUserLocation(userOrderInfoDto.location)}
          </Descriptions.Item>
          {userOrderInfoDto.status != '10' ? (
            <Descriptions.Item label="前置风控结果（前置风控通过后方可审核）">
              {queryAssetRiskRes == '-1'
                ? '交易不存在'
                : [
                    '拒绝',
                    '通过',
                    '处理中',
                    '送审中',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '未芝麻免押授权'
                  ][queryAssetRiskRes] || '暂未返回结果，请稍后刷新重试～'}
              {!queryAssetRiskRes ? (
                <Button
                  style={{ marginLeft: '10px' }}
                  type="primary"
                  icon="reload"
                  loading={queryLoading}
                  onClick={() => this.queryPreRiskResult()}
                />
              ) : // <Icon type="reload" style={{marginLeft:'10px',cursor: 'pointer',color: '#5476F0'}} onClick={() => this.queryPreRiskResult()}/>
              null}
            </Descriptions.Item>
          ) : null}

          <Descriptions.Item label="身份证照片" span={2}>
            {userOrderInfoDto.idCardBackUrl ? (
              <>
                <img
                  src={userOrderInfoDto.idCardBackUrl}
                  style={{
                    width: 146,
                    height: 77,
                    marginRight: 20,
                    borderRadius: 4
                  }}
                  onClick={() => this.onKaiImg(userOrderInfoDto.idCardBackUrl)}
                />
                <img
                  onClick={() => this.onKaiImg(userOrderInfoDto.idCardFrontUrl)}
                  src={userOrderInfoDto.idCardFrontUrl}
                  style={{
                    width: 146,
                    height: 77,
                    marginRight: 20,
                    borderRadius: 4
                  }}
                />
                {userOrderInfoDto.faceImage && (
                  <img
                    src={userOrderInfoDto.faceImage}
                    style={{ width: 146, height: 77, borderRadius: 4 }}
                    onClick={() => this.onKaiImg(userOrderInfoDto.faceImage)}
                    alt="自拍照"
                  />
                )}
              </>
            ) : (
              <span className="red-status">未上传</span>
            )}
          </Descriptions.Item>
          {/* <Descriptions.Item label="蚁盾分">
            {this.state.antRiskScore >= 0 ? (
              <span className="primary-color">{this.state.antRiskScore}分</span>
            ) : (
              <span className="primary-color">暂无评分</span>
            )}
            &emsp;(0-100分之间，分值越高，风险越大，大于等于80分订单无法承保。)
          </Descriptions.Item>*/}
        </Descriptions>
        {this.renderBaseInfoButtons()}
        <Divider />
        {orderChgzContractDto &&
        userOrderInfoDto.status != '01' &&
        userOrderInfoDto.status != '10' ? (
          <Descriptions>
            <Descriptions.Item label="公证状态" span={2}>
              {signStatus[orderChgzContractDto.status]}
            </Descriptions.Item>
            <Descriptions.Item label="用户签名" span={2}>
              {orderChgzContractDto.signFile ? (
                <a>
                  <img
                    src={orderChgzContractDto.signFile}
                    style={{ width: 146, height: 77, marginRight: 20 }}
                    onClick={() => this.onKaiImg(orderChgzContractDto.signFile)}
                  />
                </a>
              ) : (
                <span className="red-status">未签署</span>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="公证告知书" span={1}>
              {orderChgzContractDto.notarizationNoticeFile ? (
                <a
                  href={orderChgzContractDto.notarizationNoticeFile}
                  target="_blank"
                >
                  《公证告知书》
                </a>
              ) : (
                '无'
              )}
            </Descriptions.Item>
            <Descriptions.Item label="公证谈话笔录" span={1}>
              {orderChgzContractDto.talkRecordFile ? (
                <a href={orderChgzContractDto.talkRecordFile} target="_blank">
                  《公证谈话笔录》
                </a>
              ) : (
                '无'
              )}
            </Descriptions.Item>
            <Descriptions.Item label="租赁服务协议" span={1}>
              {orderChgzContractDto.signContractFile ? (
                <a href={orderChgzContractDto.signContractFile} target="_blank">
                  《租赁服务协议》
                </a>
              ) : (
                '无'
              )}
            </Descriptions.Item>
            <Descriptions.Item label="公证书" span={1}>
              {orderChgzContractDto.notarizationUrl ? (
                <a href={orderChgzContractDto.notarizationUrl} target="_blank">
                  《公证书》
                </a>
              ) : (
                '无'
              )}
            </Descriptions.Item>
          </Descriptions>
        ) : null}
        {/* <Descriptions>
          <Descriptions.Item label="区块链合同状态" span={1}>
            <span>
              {orderAntChainContractDto ? contractStatus[orderAntChainContractDto.status] : '无'}
            </span>
          </Descriptions.Item>
          <Descriptions.Item label="区块链合同" span={1}>
            {orderAntChainContractDto && orderAntChainContractDto.status === 'SIGNED' ? (
              <a href={orderAntChainContractDto.contractFile} target="_blank">
                《区块链合同》
              </a>
            ) : (
              '无'
            )}
          </Descriptions.Item>
        </Descriptions> */}
        {/*<Descriptions title={<CustomCard title="商家信息" />}>*/}
        {/*  <Descriptions.Item label="商家名称">*/}
        {/*    {shopInfoDto && shopInfoDto.shopName}*/}
        {/*  </Descriptions.Item>*/}
        {/*  <Descriptions.Item label="商家电话" span={2}>*/}
        {/*    {shopInfoDto && shopInfoDto.telephone}*/}
        {/*  </Descriptions.Item>*/}
        {/*</Descriptions>*/}
        {/*<Divider />*/}
      </Card>
    )
  }

  render() {
    const { orderBuyOutDto, wlList } = this.props
    const { drawerVisible } = this.state

    return (
      <PageHeaderWrapper>
        <Spin
          spinning={
            getParam('RentRenewal')
              ? this.props.RentRenewalLoading
              : this.props.loading
          }
        >
          {this.renderBaseInfo()}
          {this.renderContentTabCard()}
        </Spin>

        {this.renderRemarkModal()}
        {this.renderDeliverModal()}
        {this.renderCloseModal()}
        {/* {this.renderSettleNoticeModal()} */}
        {this.renderSettleModal()}
        {this.renderAddressModal()}
        {this.renderAuditModal()}
        {this.renderCollectionRecordModal()}
        <Drawer
          width={420}
          title={this.state.drawerTitle || '发货物流信息'}
          placement="right"
          onClose={this.onClose}
          visible={drawerVisible}
        >
          <Timeline>
            {wlList.map((item, idx) => {
              let color = 'blue'
              if (idx === 0) {
                color = 'green'
              }
              return (
                <Timeline.Item
                  style={{ color: idx !== 0 ? '#aaa' : '#333' }}
                  key={idx}
                  color={color}
                >
                  <p>{item.remark}</p>
                  <p>{item.datetime}</p>
                </Timeline.Item>
              )
            })}
          </Timeline>
        </Drawer>
        <Modal
          visible={this.state.visiblesimg}
          onCancel={this.handleCancels}
          destroyOnClose
          footer={null}
        >
          <img src={this.state.img} alt="alt" style={{ width: '100%' }} />
        </Modal>
      </PageHeaderWrapper>
    )
  }
}
